<template>
	<view class="get-book">
		<title title="证书领取" :showLine='true' :lineShow='true'></title>
		<!-- 没有证书 -->
		<view class="title-ct mt-25" v-if="!isBook">
			请先完成所有课程学习
		</view>
		<!-- 没有收货地址 -->
		<view class="add-address" v-if="!isAddress&&isBook">
			<view class="title-ct mt-25 mb-50">
				恭喜您已完成所有课程学习，请填写邮寄地址，证书将在3日内为您邮寄。
			</view>
			<view class="form-box">
				<u-form :label-style='style' label-position='top' :error-type="errorType" :model="form" ref="uForm">
					<u-form-item label="姓名" prop="name">
						<u-input v-model="form.name" placeholder='请输入姓名' />
					</u-form-item>
					<u-form-item label="电话" prop="phone">
						<u-input v-model="form.phone" placeholder='请输入电话' />
					</u-form-item>
					<u-form-item label="地址" prop="address">
						<u-input v-model="form.address" placeholder='请输入地址' />
					</u-form-item>
				</u-form>
			</view>
			<view class="pour-text">
				注：您也可以使用电脑登录中装协官网，在官网上下载电子证书。官网链接：www.cbda1984.com
			</view>
			<u-button type='jz' :ripple="true" @click="handSubAddress">提 交</u-button>
		</view>
		<view class="show-address" v-if="isAddress&&isBook">
			<view class="title-ct mt-25 mb-50">
				以下为您的邮寄地址，证书将在3日内为您邮寄。如地址有误，请及时联系客服 010-00000000，证书寄出后将无法更改。
			</view>
			<u-cell-group>
				<u-cell-item :value-style='valueStyle' :title-style='titleStyle' :arrow='false' title="姓名" :value="isAddress.name"></u-cell-item>
				<u-cell-item :value-style='valueStyle' :title-style='titleStyle' :arrow='false' title="电话" :value="isAddress.phone"></u-cell-item>
				<u-cell-item :value-style='valueStyle' :title-style='titleStyle' :arrow='false' title="地址" :value="isAddress.address"></u-cell-item>
			</u-cell-group>
			<view class="pour-text">
				注：您也可以使用电脑登录中装协官网，在官网上下载电子证书。官网链接：www.cbda1984.com
			</view>
		</view>
	</view>
</template>

<script>
	import title from '@/components/bs-title/bs-title.vue'
	export default {
		props: {
			//是否有证书
			isBook: {
				type: [Object, Boolean],
				default: false
			},
			//是否有地址
			isAddress: {
				type: [Object, Boolean],
				default: false
			}

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			//表单存在了 在创建表单验证
			if (!this.isAddress && this.isBook) {
				this.$refs.uForm.setRules(this.rules);
			}
		},

		components: {
			title
		},
		data() {
			return {
				titleStyle: {
					fontWeight: "bold",
					color: '#303030',
					fontSize: '28rpx'
				},
				valueStyle: {
					color: '#666666',
					fontSize: '32rpx'
				},
				errorType: ['border-bottom', 'toast'],
				style: {
					color: '#303030',
					fontWeight: 'bold'
				},
				form: {
					name: '',
					phone: '',
					address: '',
				},
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/,
							transform(value) {
								return String(value);
							},
							message: '姓名不能输入数字和特殊符号'
						},
					],
					phone: [{
							required: true,
							message: '请输入电话号码',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
							transform(value) {
								return String(value);
							},
							message: '电话号码格式不正确'
						},
					],
					address: [{
						required: true,
						min: 3,
						message: '地址不能少于3个字',
						trigger: ['change', 'blur'],
					}]
				}
			};
		},
		methods: {
			handSubAddress() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.form.courseId = this.isBook.courseId
						this.$u.api.addMailingAddress(this.form).then(res => {
							console.log(res, '提交表单')
							uni.showToast({
								title: '添加地址成功',
							})
							this.$parent.init()
						})
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.get-book {
		.pour-text {
			color: #D71A1A;
			font-size: 26rpx;
			margin-top: 30rpx;
			margin-bottom: 60rpx;
		}
	}
</style>
